<template>
    <zt-dialog v-model="visible" :title="props.objectValue.dictName + ' 词典词条'">
        <zt-table-popup-page ref="tableRef" :searchColumns="searchFormDataEntry" :tableColumns="columnsDataEntry"
            :tableData="tableData" :api="apiGetCodeDictionaryItemPage" :paramForm="paramForm"
            :moreOperations="operationsConfig">
            <template #headerRight>
                <el-button type="primary" v-auth="'codeDictionary_entry_create'" :icon="Plus"
                    @click="handleAdd">新增词条</el-button>
            </template>
            <template #moreColumn="{ row, index }">
                <el-button size="small" v-auth="'codeDictionary_entry_modify'" type="primary" :icon="Edit"
                    @click.stop="handleEdit(row)">修改</el-button>
                <el-button size="small" v-auth="'codeDictionary_entry_delete'" type="danger" :icon="Delete"
                    @click.stop="handleDelete(row)">删除</el-button>
            </template>
        </zt-table-popup-page>
        <add-secondary-entry-dialog v-model="addDialogVisible" :objectValue="objectData" :currentType="currentType"
            @success="handerReload" v-if="addDialogVisible" />
    </zt-dialog>
</template>

<script setup>
import {
    Plus, Delete, Edit
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { apiGetCodeDictionaryItemPage, apiDeleteCodeDictionaryItem } from "@/api/admin/codeDictionary/api.js"
import addSecondaryEntryDialog from "./add-secondary-entry-dialog.vue"
import { columnsDataEntry, searchFormDataEntry } from "../configData.js"

const paramForm = reactive({
    dictId: '',// 部门id
})

const objectData = ref({})

// 更多列配置信息
const operationsConfig = {
    title: '操作', //标题
    align: 'center',//居中方式
    width: '200px',//宽度
    fixed: 'right',//固定定位方向
}

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    // 控制弹窗显示
    visible: {
        type: Boolean,
        default: false
    },
    // 传递过来的值
    objectValue: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

// 子组件定义自己的visible
const visible = computed({
    get: () => props.visible,
    set: (value) => {
        emit('update:modelValue', value)
    },
})

// 监听传递过来的值 赋值
watch(() => props.objectValue, (e) => {
    if (e) {
        paramForm.dictId = e.dictId
    }
}, {
    deep: true,
    immediate: true
})

// 控制词条弹窗显示
const addDialogVisible = ref(false)
const currentType = ref('add') //当前操作类型

// 新增词条方法
function handleAdd() {
    currentType.value = 'add';
    addDialogVisible.value = true
    objectData.value = {
        dictId: paramForm.dictId
    }
}


//修改词条
function handleEdit(row) {
    currentType.value = 'edit';
    addDialogVisible.value = true
    objectData.value = row
}

// 删除词条
const handleDelete = (row) => {
    ElMessageBox.confirm('你是否确认删除该词条')
        .then(() => {
            apiDeleteCodeDictionaryItem({ ids: row.itemId }, '词条删除中').then(res => {
                if (res.success) {
                    ElMessage({
                        message: '词条删除成功',
                        type: 'success',
                    })
                    handerReload()
                    return false
                }
                ElMessage({
                    message: res.message,
                    type: 'warning',
                })
            })
        })
}

const tableRef = ref(null)
// 重新加载 表格数据
async function handerReload() {
    tableRef.value.reload() //调用父组件里面的重载方法
}


onMounted(() => {
    // getDataList()
})


</script>

<style lang='scss' scoped></style>